<script setup lang="ts">
import { FileUpload } from "@/components/common/FileUpload";
import Delete from "@iconify-icons/ep/delete";
import AddFill from "@iconify-icons/ep/plus";
import { ref } from "vue";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";

// 富文本
import WangEditor from "@/components/common/WangEditor";
import "@wangeditor/editor/dist/css/style.css";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: null,
    title: "新增",
    achievementSupport: "",
    additionFiles: "",
    domain: "",
    keyPoints: undefined,
    keywords: "",
    keywordList: [],
    overAchievements: "",
    horizontalProjectIds: [],
    otherObtainRewardIds: [],
    achievementTransformationIds: [],
    longitudinalProjectIds: [],
    paperIds: [],
    patentIds: [],
    masterUser: "",
    relyOnUnit: "",
    researchTeamId: null,
    scrAchievementsName: "",
    subject: "",
    achievementsType: ""
  }),
  userList: null,
  selectOpt: {}
});

const teamChange = val => {
  let relyOnUnit = "";
  let masterUser = "";
  if (val) {
    let obj = props.selectOpt.tdList.find(v => v.id == val);
    relyOnUnit = obj?.relyOnUnit;
    masterUser = obj?.masterUser?.name;
  }
  newFormInline.value.relyOnUnit = relyOnUnit;
  newFormInline.value.masterUser = masterUser;
};

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="120px"
    class="mr-12"
  >
    <div class="flex">
      <el-form-item
        label="科研成果名称"
        prop="scrAchievementsName"
        class="flex-1"
      >
        <el-input
          v-model="newFormInline.scrAchievementsName"
          placeholder="请输入"
          class="!w-full"
        />
      </el-form-item>
      <div class="flex-1" />
    </div>
    <div class="flex">
      <el-form-item label="团队" prop="researchTeamId" class="flex-1">
        <el-select
          v-model="newFormInline.researchTeamId"
          placeholder="请选择"
          clearable
          class="!w-full"
          @change="teamChange"
        >
          <el-option
            v-for="item in props.selectOpt.tdList"
            :key="item.id"
            :label="item.teamName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="负责人" prop="fzr" class="flex-1">
        <div>{{ newFormInline.masterUser || "--" }}</div>
      </el-form-item>
    </div>
    <div class="flex">
      <el-form-item label="依托单位" prop="relyOnUnit" class="flex-1">
        <el-input
          v-model="newFormInline.relyOnUnit"
          placeholder="请输入"
          class="!w-full"
        />
      </el-form-item>
      <el-form-item label="所属学科" prop="subject" class="flex-1">
        <el-input
          v-model="newFormInline.subject"
          placeholder="请输入"
          class="!w-full"
        />
      </el-form-item>
    </div>
    <div class="flex">
      <el-form-item label="所属领域" prop="domain" class="flex-1">
        <el-input
          v-model="newFormInline.domain"
          placeholder="请输入"
          class="!w-full"
        />
      </el-form-item>
      <div class="flex-1" />
    </div>

    <div class="flex">
      <el-form-item label="关键词" prop="keywordList" class="flex-1">
        <div class="w-full">
          <div
            v-for="(item, index) in newFormInline.keywordList"
            :key="index"
            class="flex items-center"
            :class="
              index == newFormInline.keywordList.length - 1 ? '' : 'mb-[15px]'
            "
          >
            <el-input
              v-model="item.keywords"
              class="mr-[10px] flex-1"
              clearable
              placeholder="请输入"
            />
            <IconifyIconOffline
              v-if="index != 0"
              class="text-red-500 cursor-pointer mr-[8px]"
              :icon="Delete"
              @click="newFormInline.keywordList.splice(index, 1)"
            />
            <IconifyIconOffline
              class="cursor-pointer"
              :icon="AddFill"
              @click="newFormInline.keywordList.push({ keywords: '' })"
            />
          </div>
        </div>
      </el-form-item>
      <div class="flex-1" />
    </div>
    <el-form-item label="合同附件" prop="additionFiles">
      <FileUpload v-model="newFormInline.additionFiles" :limit="15" />
    </el-form-item>

    <div class="choose-achiev">
      <h4 class="mb-1">选择成果</h4>

      <div class="flex">
        <el-form-item label-width="55" class="w-[165px]">
          <div class="text-orange-500">成果类型</div>
        </el-form-item>
        <el-form-item
          label=""
          label-width="0"
          prop="horizontalProjectIds"
          class="flex-1"
        >
          <el-input
            v-model="newFormInline.achievementsType"
            placeholder="请输入"
          />
        </el-form-item>
      </div>
      <!-- 横向项目 -->
      <div class="flex">
        <el-form-item label-width="55" class="w-[165px]">
          <div class="text-orange-500">横向项目</div>
        </el-form-item>
        <el-form-item
          label=""
          label-width="0"
          prop="horizontalProjectIds"
          class="flex-1"
        >
          <el-select
            v-model="newFormInline.horizontalProjectIds"
            clearable
            filterable
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in props.selectOpt.hxList"
              :key="item.id"
              :label="item.verticalProjectName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </div>
      <!-- 纵向项目 -->
      <div class="flex">
        <el-form-item label-width="55" class="w-[165px]">
          <div class="text-orange-500">纵向项目</div>
        </el-form-item>
        <el-form-item
          label=""
          label-width="0"
          prop="longitudinalProjectIds"
          class="flex-1"
        >
          <el-select
            v-model="newFormInline.longitudinalProjectIds"
            clearable
            filterable
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in props.selectOpt.zxList"
              :key="item.id"
              :label="item.verticalProjectName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </div>
      <!-- 论文 -->
      <div class="flex">
        <el-form-item label-width="55" class="w-[165px]">
          <div class="text-orange-500">论文</div>
        </el-form-item>
        <el-form-item label="" label-width="0" prop="paperIds" class="flex-1">
          <el-select
            v-model="newFormInline.paperIds"
            clearable
            filterable
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in props.selectOpt.lwList"
              :key="item.id"
              :label="item.paperName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </div>
      <!-- 专利 -->
      <div class="flex">
        <el-form-item label-width="55" class="w-[165px]">
          <div class="text-orange-500">专利</div>
        </el-form-item>
        <el-form-item label="" label-width="0" prop="patentIds" class="flex-1">
          <el-select
            v-model="newFormInline.patentIds"
            clearable
            filterable
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in props.selectOpt.zlList"
              :key="item.id"
              :label="item.patentName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </div>
      <!-- 科研获奖 -->
      <div class="flex">
        <el-form-item label-width="55" class="w-[165px]">
          <div class="text-orange-500">科研获奖</div>
        </el-form-item>
        <el-form-item
          label=""
          label-width="0"
          prop="otherObtainRewardIds"
          class="flex-1"
        >
          <el-select
            v-model="newFormInline.otherObtainRewardIds"
            clearable
            filterable
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in props.selectOpt.hjList"
              :key="item.id"
              :label="item.rewardName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </div>
      <!-- 成果转化 -->
      <div class="flex">
        <el-form-item label-width="55" class="w-[165px]">
          <div class="text-orange-500">成果转化</div>
        </el-form-item>
        <el-form-item
          label=""
          label-width="0"
          prop="achievementTransformationIds"
          class="flex-1"
        >
          <el-select
            v-model="newFormInline.achievementTransformationIds"
            clearable
            filterable
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in props.selectOpt.cgzhList"
              :key="item.id"
              :label="item.patentName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </div>
    </div>

    <el-form-item label="成果概述" prop="overAchievements">
      <WangEditor v-model="newFormInline.overAchievements" />
    </el-form-item>

    <el-form-item label="创新要点" prop="keyPoints">
      <WangEditor v-model="newFormInline.keyPoints" />
    </el-form-item>

    <el-form-item label="成果支撑" prop="achievementSupport">
      <WangEditor v-model="newFormInline.achievementSupport" />
    </el-form-item>
  </el-form>
</template>
<style lang="scss" scoped>
.choose-achiev {
  border: 1px solid #efefef;
  padding: 10px 15px;
  border-radius: 8px;
  margin: 0 0 18px 50px;
}
</style>
